@use 'sass:map';
// taggit tagging
.tagit {
  padding: 0.6em 1.2em;

  .tagit-choice {
    border: 0;
  }
}

// Additional specificity (.admin_tag_widget ) required to override tagit stylesheets,
// which get added after the core CSS, and otherwise trump our styles.
.admin_tag_widget ul.tagit input[type='text'] {
  padding: 0.2em 0.5em;
}

// Additional specificity (.admin_tag_widget ) required to override tagit stylesheets,
// which get added after the core CSS, and otherwise trump our styles.
.admin_tag_widget ul.tagit li.tagit-choice-editable {
  padding: 0 23px 0 0;
}

.ui-front {
  // provided by jqueryui but not high enough an index
  z-index: 1000;
}

.tagit-close {
  .ui-icon-close {
    margin-inline-start: 1rem;
    text-indent: 0;
  }

  .ui-icon-close:before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background: $color-grey-3;
    mask-image: url('#{$images-root}icons/cross.svg');
    mask-repeat: no-repeat;
  }

  .ui-icon-close:hover:before {
    color: theme('colors.critical.200');
  }
}
